import React, { Component } from "react";
import Button from "@component/button/index";
import { connect } from "react-redux";
import { InputItem, Toast, ActionSheet } from "antd-mobile";
import Notice from "@component/notice/notice";
import { agreements_url } from "@config/Config";
import Banner from "@/views/viewCommon/Banner";
import "./index.scss";
import themeUtil from "@tools/theme";
const submitCardRegexp = value => value.replace(/\s*/g, "");
const checkNameReg = value => /^.{0,30}$/.test(value);
const checkIdCard = value => /^.{18}$/.test(value);

//动作面板参数
const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
	window.navigator.userAgent
);
let wrapProps;
if (isIPhone) {
	wrapProps = {
		onTouchStart: e => e.preventDefault()
	};
}

const agreementPageMap = {
	1: "/personalInformationLicense",
	2: "/personalCreditAuthorization",
	3: ""
};

/**
 * 二要素组件
 */
@connect(state => ({
	bonusStr: state.bankReducer.bonusStr,
	ocrInfo: state.livenessReducer,
	mobile: state.getAppPlatformsDatas.mobile
}))
class XhfCertification extends Component {
	constructor(props) {
		super(props);
		this.state = {
			userName: "",
			idNo: "",
			bannerList: [],
			spaceID: "",
			inputDisabled: false
		};
	}
	componentWillReceiveProps = nextProps => {
		//props 更新
		const { bannerList, userName, idNo, inputDisabled } = nextProps.pageParams;
		this.setState({
			bannerList
		});
		if (
			nextProps !== this.props &&
			nextProps.pageParams.userName != "" &&
			nextProps.pageParams.idNo != ""
		) {
			this.setState({
				userName,
				idNo,
				inputDisabled
			});
		}
	};
	componentDidMount = () => {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.addEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
		let _tempRandom = Math.round(Math.random() * 1000000);
		this.setState({
			spaceID: _tempRandom
		});
	};
	componentWillUnmount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.removeEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
	}
	keyboardEvent = obj => {
		const id = document.activeElement.getAttribute("id");
		if (id !== "fix-cursor") {
			let winHeight = document.documentElement.clientHeight;
			if (document.getElementById(`keybordb_${this.state.spaceID}`)) {
				document.getElementById(`keybordb_${this.state.spaceID}`).style.height =
					(winHeight * obj.heightper) / 2 + 74 + "px";
			}
		}
		if (id === "js-fix-bug") {
			document.activeElement.scrollIntoView();
		}
	};
	InputOnChange = (key, value) => {
		this.setState({
			[key]: value
		});
	};
	checkCanSubmit = (idNo, userName) => {
		if (!userName) {
			Toast.info("请输入姓名", 2);
			return false;
		}
		if (!checkNameReg(submitCardRegexp(userName))) {
			Toast.info("请输入正确的姓名", 2);
			return false;
		}
		if (!idNo) {
			Toast.info("请输入身份证", 2);
			return false;
		}
		if (!checkIdCard(submitCardRegexp(idNo))) {
			Toast.info("请输入正确的身份证", 2);
			return false;
		}
		return true;
	};
	saveFn = () => {
		const { idNo, userName } = this.state;
		if (this.checkCanSubmit(idNo, userName)) {
			this.props.Submit(idNo, userName);
		}
	};
	//查看协议
	openContract = path => {
		const year = new Date().getFullYear();
		const month = new Date().getMonth() + 1;
		const day = new Date().getDate();
		const { userName, idNo } = this.props.ocrInfo;
		const commonParams = {
			personName: userName,
			idCardCode: idNo,
			year,
			month,
			day
		};
		this.props.history.push({
			pathname: path,
			params: commonParams
		});
	};
	showActionSheet = () => {
		const BUTTONS = [
			"《个人信息授权书》",
			"《个人征信授权书》",
			"《个人循环授信借款合同》",
			"取消"
		];
		ActionSheet.showActionSheetWithOptions(
			{
				options: BUTTONS,
				cancelButtonIndex: BUTTONS.length - 1,
				maskClosable: true,
				"data-seed": "logId",
				wrapProps
			},
			buttonIndex => {
				let type = buttonIndex + 1;
				const { userName, idNo } = this.props.ocrInfo;
				const year = new Date().getFullYear();
				const month = new Date().getMonth() + 1;
				const day = new Date().getDate();
				const commonParams = {
					personName: userName,
					idCardCode: idNo,
					year,
					month,
					day
				};
				if (type == 3) {
					this.props.history.push({
						pathname: "/iframeAgreements",
						state: {
							src: agreements_url + "/xhfCreditPaymentContract.html",
							title: "个人循环授信借款合同"
						}
					});
				} else if (type != 3 && type != 4) {
					this.props.history.push({
						pathname: agreementPageMap[type],
						params: commonParams
					});
				}
			}
		);
	};
	render() {
		const { bonusStr } = this.props;
		const { bannerList, userName, idNo, inputDisabled } = this.state;
		return (
			<div className="xhfTwoInfo-warpper">
				<div className="add-bank-containers">
					{bonusStr && <Notice noticeContent={bonusStr} />}
					{themeUtil.getTheme() == "yhLife" && (
						<Banner
							className="header-img"
							bannerList={bannerList}
							history={this.props.history}
						/>
					)}
					{themeUtil.getTheme() == "yhLife" && (
						<div className="progress-container" style={{ height: "1.4rem" }}>
							<p className="progress-title" style={{ marginTop: ".6rem" }}>
								已填写 <em>50%</em> 最高5万元信用额度
							</p>
							<div className="progress-bg">
								<span className="progress-line" style={{ width: "50%" }}></span>
							</div>
						</div>
					)}
					<p
						className="title-p"
						style={{ marginTop: "0", lineHeight: "0.76rem" }}
					>
						请填写您的真实身份信息
					</p>

					<InputItem
						className="my-input"
						value={userName}
						disabled={inputDisabled}
						placeholder="请输入姓名"
						maxLength={10}
						id="js-fix-bug"
						onChange={this.InputOnChange.bind(this, "userName")}
					>
						姓名
					</InputItem>
					<InputItem
						clear
						maxLength={18}
						type="text"
						id="js-fix-bug"
						disabled={inputDisabled}
						placeholder="请输入身份证号码"
						value={idNo}
						className="my-input"
						onChange={this.InputOnChange.bind(this, "idNo")}
					>
						身份证号码
					</InputItem>
				</div>
				<div className="button-wrapper">
					<div className="agree-wrapper">
						<span className="multi-line">
							<p className="huise" onClick={this.showActionSheet}>
								点击按钮，表示您已阅读并同意
								<a className="xieyi">《永辉金融相关协议》</a>
							</p>
						</span>
					</div>
					<Button style={{ marginTop: ".2rem" }} onClick={this.saveFn}>
						下一步
					</Button>
					<div id={"keybordb_" + this.state.spaceID}></div>
				</div>
			</div>
		);
	}
}
export default XhfCertification;
